/* eslint-disable @typescript-eslint/no-explicit-any */

import { defineComponent, KeepAlive } from 'vue'
import { RouterView, RouteRecordRaw } from 'vue-router'

import Header from '@/common/Header'
import BottomNav from '@/common/BottomNav'
import TopNavs from '@/components/TopNavs'

export default defineComponent({
  name: 'Home',
  setup() {
    return () => (
      <>
        <Header>
          <TopNavs
            navs={[
              { to: '/follow', label: '關注' },
              { to: '/recommend', label: '推薦' },
              { to: '/college', label: '學院' },
            ]}
          />
        </Header>

        <RouterView
          v-slots={{
            default: ({ Component = () => <div></div> }: { Component: any; route: RouteRecordRaw }) => {
              return (
                <KeepAlive include={['Recommend', 'Follow', 'College']}>
                  <Component />
                </KeepAlive>
              )
            },
          }}
        />

        <BottomNav />
      </>
    )
  },
})
